<template>
    <!-- <el-avatar class="avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
    </el-avatar>
    <span class="nickname">用户1</span>
    <router-link to="/reg" class="link"><span class="nickname">注册</span></router-link>

    <router-link to="/login" class="link"><span class="nickname">登录</span></router-link> -->
    <el-dropdown>
        <span class="el-dropdown-link ">
            <el-avatar class="avatar" :src="this.$store.getters.useImg">
            </el-avatar>
            <!-- 直接绑定user -->
            <span class="nickname">{{this.$store.getters.nickName}}</span>
            <el-icon class="el-icon--right">
            <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item v-if="this.$store.getters.nickName=='访客'">
                <router-link to="/login" class="link"><span class="nickname">登录</span></router-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="this.$store.getters.nickName=='访客'">
                <router-link to="/reg" class="link"><span class="nickname">注册</span></router-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="this.$store.getters.nickName!='访客'">
                <span class="nickname" @click="logout">退出</span>
            </el-dropdown-item>
        </el-dropdown-menu>
        </template>
  </el-dropdown> 
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
</script>

<script>
export default {
    data(){
        return {
            nickname: '访客',
        }
    },
    //页面元素加载完毕（数据挂在的时候），系统调用的方法（钩子方法）mounted()
    methods:{
        logout(){
            sessionStorage.removeItem('user');
            sessionStorage.removeItem('jwttoken');
            this.nickname = '访客';
            this.$store.commit('delUser');
            alert('退出成功！');
            this.$router.push("/login");
        },
        // loadInfo(){
        //     let user = sessionStorage.getItem('user');
        //     if (user) {
        //         this.nickname = JSON.parse(user).nickName;
        //     } else{
        //         this.nickname = '访客';
        //     }
        // },
    }
}
</script>

<style scoped>
*{
    vertical-align: middle;
}
.example-showcase .el-dropdown-link {
    cursor: pointer;
    /* color: var(--el-color-primary); */
    display: flex;
    align-items: center;
}
.example-showcase .el-dropdown-link:hover {
    color: #409EFF;
}
.avatar{
    display: inline-block;
    margin: 10px;
}
.link {
    text-decoration: none;
    color: black;
}
.nickname{
    transition: all 0.2s;
}
.nickname:hover {
    font-size: 17px;
    text-shadow: 0px 1px 2px #fff;
    color: rgb(64, 158, 255);
}
.nickname {
    font-size: medium;
    text-align: center;
}
</style>